<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>XX医药集散中心物流能力展示</title>
    <link rel="stylesheet" href="../src/css/iview.css">
    <link rel="stylesheet" href="../src/css/vue-style.css">
    <link rel="stylesheet" href="css/style.css">
    <style>

    </style>
</head>

<body>
    <div id="app">
        <div class="wrap">

            <div class="head">
                <h1>XX医药集散中心物流能力展示</h1>
            </div>
            <div class="div1 bg-part wrap-div">
                <p :class="[blue,erect_line]">配送能力展示</p>
                <div class="div-flex-display">
                    <div class="display display-1">

                        <div class="display-1-left">
                            <img src="images/div1-1.png" alt="">
                        </div>
                        <div :class="[display_1_right]">
                            <p>上游委托企业（家）</p>
                            <p>30</p>
                        </div>

                    </div>
                    <div class="display display-2">
                        <div class="display-1-left">
                            <img src="images/div1-2.png" alt="">
                        </div>
                        <div :class="[display_1_right]">
                            <p>下游客户（万家）</p>
                            <p>1.3</p>
                        </div>
                    </div>
                    <div class="display display-3">
                        <div class="display-1-left">
                            <img src="images/div1-3.png" alt="">
                        </div>
                        <div :class="[display_1_right]">
                            <p>医药货量（件/年）</p>
                            <p>2,331,432</p>
                        </div>
                    </div>
                    <div class="display display-4">
                        <div class="display-1-left">
                            <img src="images/div1-4.png" alt="">
                        </div>
                        <div :class="[display_1_right]">
                            <p>运营车辆&冷藏车辆</p>
                            <p>52 & 25</p>
                        </div>
                    </div>
                    <div class="display display-5">
                        <div class="display-1-left">
                            <img src="images/div1-5.png" alt="">
                        </div>
                        <div :class="[display_1_right]">
                            <p>存储中心（家）</p>
                            <p>0</p>
                        </div>
                    </div>
                    <div class="display display-6">
                        <div class="display-1-left">
                            <img src="images/div1-6.png" alt="">
                        </div>
                        <div :class="[display_1_right]">
                            <p>配送终端（个）</p>
                            <p>9573</p>
                        </div>
                    </div>
                    <div class="display display-7">
                        <div class="display-1-left">
                            <img src="images/div1-7.png" alt="">
                        </div>
                        <div :class="[display_1_right]">
                            <p>辐射省份&城市</p>
                            <p>5 & 50</p>
                        </div>
                    </div>
                </div>
                <div class="bg-part2"></div>
            </div>
            <div class="div2">
                <div class="div2-left bg-part wrap-div">
                    <p :class="[blue,erect_line]">仓储能力展示</p>
                    <div :class="[div2_left_p,div2_p]">
                        <p>平均订单处理效率：<span class="blue">84分钟/单</span></p>
                        <p>日出库订单数：<span class="blue">XX单</span></p>
                        <p>日出库件数：<span class="blue">XX件</span></p>
                    </div>
                    <div :class="[div2_right_p,div2_p]">
                        <p>平均订单处理效率：<span class="blue">84分钟/单</span></p>
                        <p>日出库订单数：<span class="blue">XX单</span></p>
                        <p>日出库件数：<span class="blue">XX件</span></p>
                    </div>
                    <div class="div2-right-p"></div>

                    <div class="bg-part2"></div>
                </div>
                <div class="div2-right bg-part  wrap-div">
                    <p :class="[blue,erect_line]">季度平均库容使用情况</p>
                    <div id="photo-1" style="width: 100%;height:100%"></div>
                    <div class="bg-part2"></div>
                </div>
            </div>
            <div class="div3">
                <div class="div3-left bg-part wrap-div">
                    <p :class="[blue,erect_line]">仓库总体使用情况</p>
                    <p style="float:right">总容量：26万件</p>
                    <div id="photo-2" style="width: 100%;height:80%"></div>
                    <div class="bg-part2"></div>
                </div>
                <div class="div3-right bg-part wrap-div">
                    <p :class="[blue,erect_line]">仓库总体使用情况</p>
                    <div id="photo-3" style="width: 100%;height:95%"></div>
                    <div class="bg-part2"></div>
                </div>
            </div>

            <div class="foot"> Copyright © 2006-2015    深圳传世般若科技有限公司 </div>
        </div>


    </div>

    <script src="../src/js/vue.js"></script>
    <!-- <script src="src/js/axios.min.js"></script>
  <script src="src/js/iview.min.js"></script> -->
    <script src="../src/js/echarts.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                // myChart: null
                div2_left_p: 'div2-left-p',
                div2_p: 'div2-p',
                div2_right_p: 'div2-right-p',
                blue: 'blue',
                erect_line: 'erect-line',
                display_1_right: 'display-1-right'
            },
            methods: {
                // changeLine() {
                //     window.onresize = () => {

                //     }
                // },

                AllLine() {
                    var myChart1 = echarts.init(document.getElementById('photo-1'))
                    // 指定图表的配置项和数据
                    var option1 = {
                        legend: {
                            icon: 'circle',
                            left: 'right',
                            data: ['总库容：26万件'],
                            textStyle: {
                                color: '#fff',
                                fontSize: 12
                            }
                        },
                        xAxis: {
                            splitLine: { show: false },
                            type: 'category',
                            axisLine: {
                                lineStyle: {
                                    type: 'solid',
                                    color: 'rgb(13, 63, 98)',
                                    width: '1'//坐标线的宽度
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            boundaryGap: false,
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#ffffff',
                                    fontSize: 16
                                }
                            },
                            data: ['第一季度', '第二季度', '第三季度', '第四季度']
                        },
                        yAxis: {
                            splitLine: { show: false },
                            type: 'value',
                            axisLabel: false,
                            max: 1500,
                            axisLine: {
                                lineStyle: {
                                    type: 'solid',
                                    color: 'rgb(13, 63, 98)',//左边线的颜色
                                    width: '1'//坐标线的宽度
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            boundaryGap: false
                        },
                        series: [{
                            name: '总库容：26万件',
                            data: [1330, 820, 934, 1290],
                            type: 'line',
                            smooth: true,
                            color: 'rgb(65, 207, 254)',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    color: '#fff',
                                    fontSize: 12
                                }
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#237ea7' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#073154' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }

                            }
                        }]
                    };
                    myChart1.setOption(option1);

                    var myChart2 = echarts.init(document.getElementById('photo-2'))
                    // 指定图表的配置项和数据
                    var option2 = {
                        title: {
                            text: '49.23% \n\n使用率',
                            left: 'center',
                            top: '42%',
                            // padding:[24,0],
                            textStyle: {
                                color: '#fff',
                                align: 'center'
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                        },
                        legend: {
                            // orient: 'horizontal',
                            x: 'center',
                            y: 'bottom',
                            textStyle: {
                                color: '#fff'
                            },
                            data: ['可存放件数', '已存放件数']
                        },
                        series: [
                            {
                                name: '件数',
                                type: 'pie',
                                radius: ['50%', '70%'],
                                startAngle: -120, //起始角度
                                // avoidLabelOverlap: false,
                                label: {
                                    normal: {
                                        formatter: '{a|{c}件}\n\n',
                                        borderWidth: 10,
                                        borderRadius: 20,
                                        padding: [0, -50],
                                        rich: {
                                            a: {
                                                color: '#fff',
                                                fontSize: 12,
                                                lineHeight: 120
                                            }
                                        }
                                    },
                                },
                                labelLine: {
                                    normal: {
                                        lineStyle: {
                                            color: '#41cffe',
                                            type: 'dashed'
                                        },
                                        length: 20,
                                        length2: 50
                                    }
                                },
                                data: [
                                    {
                                        value: 1400, name: '可存放件数', itemStyle: {
                                            color: '#ab85db'
                                        }
                                    },
                                    {
                                        value: 1548, name: '已存放件数', itemStyle: {
                                            color: '#41cffe'
                                        }
                                    }
                                    // data.seriesData
                                ]
                            }
                        ]
                    };

                    myChart2.setOption(option2);

                    var myChart3 = echarts.init(document.getElementById('photo-3'))
                    // let self = this;
                    let datatotal = [280, 330, 580, 240, 480, 480, 320, 280, 280];
                    let dataShadow = [];
                    let data = [120, 200, 150, 80, 70, 110, 130, 100, 100];
                    let percent = [80, 20, 50, 60, 90, 20, 49, 10, 90];
                    let yMax = 100;


                    for (var i = 0; i < data.length; i++) {
                        dataShadow.push(yMax);
                    }
                    // 指定图表的配置项和数据
                    var option3 = {
                        tooltip: {
                            trigger: 'item'
                        },
                        xAxis: {
                            // type: 'category',
                            data: ['零库', '整库', '立库', '冷藏库', '冷冻库', '缓冲区', '中药库', '贵细库', '原料药库'],
                            splitLine: { show: false },
                            axisLine: {
                                lineStyle: {
                                    type: 'solid',
                                    color: 'rgb(13, 63, 98)',//左边线的颜色
                                    width: '1'//坐标线的宽度
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',//坐标值得具体的颜色
                                    // fontSize: window.screen.width>1700?14:6
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        yAxis: {
                            type: 'value',
                            show: false,
                        },
                        series: [{
                            type: 'bar',
                            data: dataShadow,
                            barGap: 50,
                            // barCategoryGap: 100,
                            barWidth: 30,
                            itemStyle: {
                                normal: {
                                    color: 'rgb(26, 38, 49)',
                                    label: {
                                        show: true,
                                        position: 'top',
                                        // formatter: '{c}',
                                        formatter: x => {
                                            return `${(datatotal[x.dataIndex] / 10000).toFixed(1)}万件`
                                        },
                                        color: '#fff',
                                        fontSize: window.screen.width > 1600 ? 12 : 10,
                                    }
                                }
                            },
                            silent: true,
                        },
                        {
                            data: percent,
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [20, 20, 0, 0],
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            { offset: 0, color: '#6ad2fd' },
                                            { offset: 1, color: '#5a63fe' }
                                        ]
                                    ),
                                    label: {
                                        show: true,
                                        position: ['-50%', '0%'],
                                        distance: '25px',
                                        // formatter:'{c}/100%',
                                        // formatter:function(a,b,c){return c/1000+"%";},
                                        formatter: function (x) {
                                            return `${(data[x.dataIndex] / 10000).toFixed(1)}/${percent[x.dataIndex]}%`
                                        },
                                        color: '#fff'
                                    }
                                }
                            },
                            // barGap:20,
                            barWidth: 30,
                            barGap: '-100%',

                        }]
                    };

                    myChart3.setOption(option3);

                    window.onresize = () => {
                        myChart1.resize();
                        myChart2.resize();
                        myChart3.resize();
                        let Swidth = document.body.clientWidth;
                        let Sheight = document.body.clientHeight;
                        // console.log(Swidth)
                        if (Swidth < 1730) {
                            if (Swidth < 1500) {
                                this.div2_p = "div2-p-1"
                                this.erect_line = "erect-line1"
                                this.display_1_right = "display-1-right-1"
                            }
                            else {
                                this.div2_p = "div2-p-1"
                            }
                        }
                        else if (Sheight < 840) {
                            this.div2_p = "div2-p-1"
                            this.erect_line = "erect-line1"
                            this.display_1_right = "display-1-right-1"
                        }
                        else {
                            this.div2_p = "div2-p"
                            this.erect_line = "erect-line"
                            this.display_1_right = "display-1-right"
                        }
                    }
                }
            },
            mounted() {
                this.AllLine();
            },
            created() {
                let Swidth = document.body.clientWidth;
                let Sheight = document.body.clientHeight;
                // console.log(Swidth)
                if (Swidth < 1730) {
                    if (Swidth < 1500) {
                        this.div2_p = "div2-p-1"
                        this.erect_line = "erect-line1"
                        this.display_1_right = "display-1-right-1"
                    }
                    else {
                        this.div2_p = "div2-p-1"
                    }
                }
                else if (Sheight < 840) {
                    this.div2_p = "div2-p-1"
                    this.erect_line = "erect-line1"
                    this.display_1_right = "display-1-right-1"
                }
                else {
                    this.div2_p = "div2-p"
                    this.erect_line = "erect-line"
                    this.display_1_right = "display-1-right"
                }
            }
        })
    </script>
</body>

</html>